<template>
    <div style="background-color: white;width: 100%;height: 100%;">
        <el-button link @click="CustomerShow()" style="margin-left: 10px;">‹返回</el-button>
        &nbsp;
        <span>|</span>
        &nbsp;
        <span style="font-size: 17px;font-weight: 700;">客户基本信息(🛠️)</span>
        <hr style='background-color:#d3d3d3; height:1px; border:none;'>
        
        <el-form  class="demo-ruleForm" :model="form" ref="formRef" label-width="auto" style="max-width: 1100px;margin-left: 180px;margin-top: 30px;">
            <el-form-item label="客户编码" style="margin: 40px;width: 500px;"  prop="customerNo" :rules="[ { required: true, message: '必填' },]">
                <el-input v-model="form.customerNo"  />
            </el-form-item>

            <el-form-item label="客户名称" style="width: 500px;float: right;margin-top: -72px;" prop="customerName" :rules="[ { required: true, message: '必填' },]">
                <el-input v-model="form.customerName" />
            </el-form-item>

            <el-form-item label="客户区分" style="margin: 40px;width: 500px;" prop="customerType" :rules="[ { required: true, message: '必填' },]" >
            <el-select v-model="form.customerType" >
                <el-option label="公司" value="公司" />
                <el-option label="个人" value="个人" />
            </el-select>
            </el-form-item>

            <el-form-item label="客户电话" style="width: 500px;float: right;margin-top: -72px;">
                <el-input v-model="form.customerPhone" />
            </el-form-item>

            <el-form-item label="客户邮箱" style="margin: 40px;width: 500px;" >
                <el-input v-model="form.customerEmail" />
            </el-form-item>

            <el-form-item label="客户行业" style="width: 500px;float: right;margin-top: -72px;">
            <el-select v-model="form.industryId" placeholder="请选择">
                <el-option label="请选择" :value="0" />
                <el-option v-for="item in options" :label="item.industryName" :value="item.industryId"/>
            </el-select>
            </el-form-item>

            <el-form-item label="客户地址" style="margin: 40px;width: 1060px;">
                <el-input v-model="form.customerAddress" />
            </el-form-item>

            <el-form-item label="所在国家" style="margin: 40px;width: 500px">
            <el-select v-model="form.countryId" placeholder="请选择">
                <el-option label="中国" value="中国" />
                <el-option label="美国" value="美国" />
                <el-option label="韩国" value="韩国" />
                <el-option label="美国" value="美国" />
                <el-option label="俄罗斯" value="俄罗斯" />
                <el-option label="印度" value="印度" />
                <el-option label="法国" value="法国" />
                <el-option label="英国" value="英国" />
                <el-option label="德国" value="德国" />
                <el-option label="比利时" value="比利时" />
                <el-option label="澳大利亚" value="澳大利亚" />
                <el-option label="南非" value="南非" />
                <el-option label="阿根廷" value="阿根廷" />
                <el-option label="巴西" value="巴西" />
                <el-option label="迪拜" value="迪拜" />
                <el-option label="卡塔尔" value="卡塔尔" />
                <el-option label="泰国" value="泰国" />
                <el-option label="西班牙" value="西班牙" />
                <el-option label="葡萄牙" value="葡萄牙" />
                <el-option label="塞尔维亚" value="塞尔维亚" />
                <el-option label="厄瓜多尔" value="厄瓜多尔" />
                <el-option label="朝鲜" value="朝鲜" />
                <el-option label="加拿大" value="加拿大" />
                <el-option label="马来西亚" value="马来西亚" />
                <el-option label="爱尔兰" value="爱尔兰" />
                <el-option label="芬兰" value="芬兰" />
                <el-option label="意大利" value="意大利" />
            </el-select>
            </el-form-item>

            <el-form-item label="所在城市" style="width: 500px;float: right;margin-top: -72px;">
            <el-select v-model="form.cityId" placeholder="请选择">
                <el-option label="北京" value="北京" />
                <el-option label="天津" value="天津" />
                <el-option label="上海" value="上海" />
                <el-option label="广州" value="广州" />
                <el-option label="深圳" value="深圳" />
                <el-option label="珠海" value="珠海" />
                <el-option label="石家庄" value="石家庄" />
                <el-option label="苏州" value="苏州" />
                <el-option label="杭州" value="杭州" />
                <el-option label="南京" value="南京" />
                <el-option label="青岛" value="青岛" />
                <el-option label="重庆" value="重庆" />
                <el-option label="长沙" value="长沙" />
                <el-option label="西安" value="西安" />
                <el-option label="成都" value="成都" />
            </el-select>
            </el-form-item>

            <el-form-item label="客户分类" style="margin: 40px;width: 500px">
                <el-select v-model="form.customerLabel" placeholder="请选择">
                    <el-option label="普通客户" value="普通客户" />
                <el-option label="vip客户" value="vip客户" />
                </el-select>
                
            </el-form-item>

            <el-form-item label="客户状态" style="width: 500px;float: right;margin-top: -72px;" prop="customerLogotype" :rules="[ { required: true, message: '必填' },]">
            <el-select v-model="form.customerLogotype" placeholder="请选择">
                <el-option label="有效" :value="true" />
                <el-option label="无效" :value="false" />
            </el-select>
            </el-form-item>

            <el-form-item label="本公司标识" style="margin: 40px;width: 500px" prop="customerState" :rules="[ { required: true, message: '必填' },]" >
            <el-select v-model="form.customerState" placeholder="请选择">
                <el-option label="是" :value="true" />
                <el-option label="否" :value="false" />
            </el-select>
            </el-form-item>

            <el-button type="success" style="width: 83px;float: right" @click="submitForm(formRef)">保存</el-button>
            
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import  { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
const formRef = ref<FormInstance>()

const router = useRouter()
const route = useRoute()

const apiurls = import.meta.env.VITE_APP_API_URL_ProductionAdd;
const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;

const form = reactive({
    customerNo:'',
    customerName:'',
    customerType:'',
    customerPhone:'',
    customerEmail:'',
    industryId:0,
    customerAddress:'',
    countryId:'',
    cityId:'',
    customerLabel:'',
    customerLogotype:true,
    customerState:true,
    approvalStatus:0,
    isDelete:false,
})

const GetIndustry=reactive({
    
})

//客户行业
const options = ref([])
const GetIndustryShows=()=>{
    axios.post(apiurl+'/api/ShowProduction/GetIndustryShow',GetIndustry).then((res)=>{
        options.value = res.data.data
    })
}


const submitForm=(formEl: FormInstance | undefined)=>{
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!')
        return;
      } else {
        console.log('error submit!')
        return;
      }
    })
    ResourAdd()
}


//添加
const ResourAdd=()=>{
    if(form.customerNo==''){
        return;
    }
    if(form.customerName==''){
        return;
    }
    if(form.customerType==''){
        return;
    }

    axios.post(apiurls+'/api/ProductionLeo/GetCustomerAdd',{
        customerNo:form.customerNo,
        customerName:form.customerName,
        customerType:form.customerType,
        customerPhone:form.customerPhone,
        customerEmail:form.customerEmail,
        industryId:form.industryId,
        customerAddress:form.customerAddress,
        countryId:form.countryId,
        cityId:form.cityId,
        customerLabel:form.customerLabel,
        customerLogotype:form.customerLogotype,
        customerState:form.customerState,
        approvalStatus:form.approvalStatus,
        isDelete:form.isDelete,
        
    }).then((res)=>{
        if(res.data.code==1){
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            CustomerShow()
        }else{
            ElMessage.error(res.data.msg)
        }
    })
}

const CustomerShow=()=>{
    router.push({name:'CustomerShow'})
}



onMounted(()=>{
    GetIndustryShows()
})
</script>